<template>
	<view class="store-order skinStyle1">
		<template v-if="jxsFlag=='jxs'">
			<scroll-view class="top-tabs-view" v-if="tabs.length>0" scroll-x="true">
				<block v-for="(tab,index) in tabs" :key="index">
					<view class="tabs-item-wrap" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
						<view class="tabs-item">
							<view class="tabs-item-txt" :class="[currentTab==index ? 'theme-color' : '']">{{tab.name}}</view>
							<view class="tabs-item-bottom" :class="[currentTab==index ? 'theme-color' : '']"></view>
						</view>
					</view>
				</block>
			</scroll-view>
		</template>
		<view class="search-header" :class="jxsFlag=='jxs'?'':'mt'">
			<!-- 搜索 -->
			<view class="search-searchbox">
				<view class="iconfont iconsousuohome"></view>
				<input v-if="jxsFlag==='jxs'" class="search-input" v-model="goodsName" confirm-type="search" @confirm="getDealerOrder({size:10,num:1})"
				 placeholder="请输入商品名" placeholder-class="placeholder"></input>
				 <input v-else class="search-input" v-model="goodsName" confirm-type="search" @confirm="getNotDealerOrder({size:10,num:1})"
				  placeholder="请输入商品名" placeholder-class="placeholder"></input>
				<view class="search-clear iconfont iconguanbi1" v-if="goodsName" @tap="clearKeyWord"></view>
			</view>
			<view class="order-condition" @tap="showTime()">
				<image src="~@/static/img/date.png" mode="日历"></image>
			</view>
		</view>
		<mescroll-body :top="jxsFlag=='jxs'?'180':'94'" ref="mescrollRef" @up="loadList" @init="mescrollInit" :up="upOption" @down="downCallback">
			<view class="order-section pd1" v-for="item in list" :key="item.id">
				<view class="order-number">
					<view class="number-left">
						<text>{{item.orderCode}}</text>
					</view>
					<template v-if="jxsFlag==='jxs'">
						<view class="status" v-if="item.orderStatus == 0">
							<text>待发货</text>
						</view>
						<view class="status" v-if="item.orderStatus == 1">
							<text>待收货</text>
						</view>
						<view class="status" v-if="item.orderStatus == 2">
							<text>已完成</text>
						</view>
					</template>
					<template v-else>
						<view class="status" v-if="item.orderStatus == 1">
							<text>已完成</text>
						</view>
					</template>
				</view>
				<view class="tui-goods-item goods-item" v-for="child in item.orderGoodsDet">
					<!-- 经销商 -->
					<template v-if="jxsFlag==='jxs'">
						<view class="tui-goods-img">
							<image :src="imgSrc + child.imgRelativeUri" />
						</view>
						<view class="tui-goods-info">
							<view class="tui-goods-info-inner">
								<view class="tui-goods-title">{{child.goodsName}}</view>
								<view class="tui-goods-sub">创建日期：<text>{{item.createTime}}</text></view>
								<view class="tui-price-box">
									<view class="tui-goods-price">{{child.goodsPoints}}<text class="small-size">积分</text></view>
								</view>
							</view>
						</view>
					</template>
					<!-- 非经销商 -->
					<template v-else>
						<view class="tui-goods-img">
							<image :src="imgSrc + child.imgRelativeUri" />
						</view>
						<view class="tui-goods-info">
							<view class="tui-goods-info-inner">
								<view class="tui-goods-title">{{child.couponName}}</view>
								<view class="tui-goods-sub">创建日期：<text>{{item.createTime}}</text></view>
								<view class="tui-price-box">
									<view class="tui-goods-price">{{child.totalPoints}}<text class="small-size">积分</text></view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="order-btns">
					<tui-button v-if="from=='agent' && item.orderStatus == 1" class="btn" type="danger" :plain="true" width="160rpx" height="62rpx" :size="28"
					 shape="circle" @tap="confirmReceipt(item)">确认收货</tui-button>
					<tui-button class="btn" type="danger" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="jumpPage(item,'detail')">查看详情</tui-button>
					<tui-button v-if="from=='agent'" class="btn" type="black" :plain="true" width="160rpx" height="62rpx" :size="28"
					 shape="circle" @tap="jumpPage(item,'logistics')">查看物流</tui-button>
				</view>
			</view>
		</mescroll-body>

		<date-popup @determine='determine' :beginDate='payTimeStart' :endDate='payTimeEnd' :popupShow='popupShow' @colosePopup='colosePopup'></date-popup>

		<!--后台接口返回错误提示框-->
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import uniCopy from '@/utils/uni-copy.js'
	import tuiButton from '@/components/button/button';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import datePopup from "@/components/datePopup/index.vue"

	export default {
		mixins: [MescrollMixin],
		components: {
			tuiButton,
			datePopup,
		},
		data() {
			return {
				imgSrc: this.$store.state.imgUrl,
				tabs: [],
				currentTab: 0, //当前tab
				list: [], //订单list
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10,
				},

				jxsFlag: '',
				
				popupShow: false,
				agencyId: '',
				payTimeStart: '',
				payTimeEnd: '',
				orderStatus: '',
				orderCode: '',
				goodsSapCode: '',
				goodsName: '',
				categoryId: '',
				cardCode:'',//非经销商会员卡号
				from:'',
			}
		},
		onLoad(options) {
			this.from=options.from;
			
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif

			if (this.from== 'agent') {
				this.jxsFlag = 'jxs';
				this.tabs = [{
					name: "全部"
				}, {
					name: "待发货"
				}, {
					name: "待收货"
				}, {
					name: "已完成"
				}];
			} else {
				this.jxsFlag = 'notjxs'
				this.tabs = [{
					name: "全部"
				}, {
					name: "已完成"
				}];
			}

		},
		methods: {
			showTime() {
				this.popupShow = true
			},
			colosePopup() {
				this.popupShow = false
			},
			determine(data,flag) {
				if(flag=='clear'){
					this.payTimeStart=''
					this.payTimeEnd=''
				}else{
					this.payTimeStart = data[0]
					this.payTimeEnd = data[1]
				}
				this.popupShow = false
				console.log(data)
				this.loadList({
					size: 10,
					num: 1
				})
			},

			getOrderStatus(status) {
				if(this.jxsFlag ==='jxs'){
					return ["待发货", "待收货", "已完成"][status]
				}else{
					return ["已完成"][status - 1]
				}
			},
			loadList(page) {
				if(this.jxsFlag =='jxs'){
					this.getDealerOrder(page)
				}else{
					this.getNotDealerOrder(page)
				}
			},
			getDealerOrder(page) { //经销商订单列表取得
				let params = {
					current: page.num,
					pageSize: page.size,
					agencyId: this.agencyId,
					payTimeStart: this.payTimeStart,
					payTimeEnd: this.payTimeEnd,
					orderCode: this.orderCode,
					goodsSapCode: this.goodsSapCode,
					goodsName: this.goodsName,
					categoryId: this.categoryId,
				}
				if(this.currentTab==0){
					this.orderStatus=null
				}else if(this.currentTab==1){
					params.orderStatus=0
					
				}else if(this.currentTab==2){
					params.orderStatus=1
				}else if(this.currentTab==3){
					params.orderStatus=2
				}
				
				this.$http.getDealerOrder(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list = []
						};
						this.list = this.list.concat(curPageData);
					}
				})
			},
			getNotDealerOrder(page) { //非经销商订单列表取得
			   let params={};
				params = {
					current: page.num,
					pageSize: page.size,
					cardCode: this.agencyId,
					payTimeStart: this.payTimeStart,
					payTimeEnd: this.payTimeEnd,
					orderCode: this.orderCode,
					couponName: this.goodsName,
				}
		
				this.$http.getNotDealerOrder(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list = []
						};
						this.list = this.list.concat(curPageData);
					}
				})
			},

			jumpPage(item, type) {
				if (type === 'detail') {
					uni.navigateTo({
						url: `/packageD/pages/pointsOrder/onlineOrderDetail?from=${this.from}&id=${item.id}`
					})
				} else if (type === 'logistics') { //查看物流
					uni.navigateTo({
						url: `/packageD/pages/logisticsInfo/logisticsInfo?from=${this.from}&orderId=${item.id}`
					});

				}
			},
			swichMenu: async function(current) { //点击其中一个 tab
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.list = [] // 先置空列表,显示加载进度
					this.mescroll.resetUpScroll(); // 再刷新列表数据

					// #ifdef APP-PLUS
					// if (current === 1) {
					// 	this.getCouponsList({
					// 		num: 1,
					// 		size: 10
					// 	})
					// }
					// #endif 

				}
			},

			clearKeyWord() {
				this.goodsName = "";
			},
			
			confirmReceipt(item) {
				this.$http.confirmReceiptDealerOrder(item).then((res) => {
							if (res.status === 0) {
								this.swichMenu(3);
							}
						})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/packageD/static/style/common.scss";

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.store-order {
		// width: 100%;
		// padding-top: 180rpx;
		// position: relative;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.top-tabs-view {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			box-shadow: 0 0 4rpx #FFFFFF;
			white-space: nowrap;
			height: 90rpx;
			position: fixed;
			left: 0;
			top: 0;
			/* css变量 */
			z-index: 788;
			border-top: 2rpx solid $borderColor;
			box-shadow: 0 0 4rpx $borderColor;
			border-top: 1rpx solid $borderColor;

			.tabs-item-wrap {
				display: inline-block;
				white-space: nowrap;
				height: 90rpx;
				width: 25%;

				.tabs-item {
					margin-left: 35rpx;
					margin-right: 30rpx;
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.tabs-item-txt {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: 400;

						// color: #333333;
						&.theme-color {
							color: $themeColor1;
						}
					}

					.tabs-item-bottom {
						position: absolute;
						bottom: 0rpx;
						width: 130rpx;
						height: 6rpx;
						left: calc(50% - 65rpx);
						&.theme-color {
							background-color: $themeColor1;
						}
					}
				}
			}

			&.tabs-view-other {
				.tabs-item-wrap {
					width:50%;
				}
			}
		}

		.search-header {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0 30rpx;
			background-color: #fff;
			border-top: 10rpx solid #f7f7f7;
			border-bottom: 10rpx solid #f7f7f7;
			position: fixed;
			top: 90rpx;
			left: 0;
			height: 110rpx;
			z-index: 500;
			&.mt{
				top: 0rpx;
			}
			.search-picker {
				width: 120rpx;
				height: 100%;
				font-size: 28rpx;
				margin-right: 10rpx;

				.search-picker-inner {
					width: 100%;
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.iconfont {
						color: #999;
					}
				}
			}

			.search-searchbox {
				flex: 1;
				height: 70rpx;
				border-radius: 80rpx;
				font-size: 24rpx;
				// background: $borderColor;
				border: 2rpx solid $themeColor1;
				padding: 6rpx 10rpx 6rpx 20rpx;
				box-sizing: border-box;
				color: #999;
				display: flex;
				align-items: center;
				overflow: hidden;

				.search-input {
					text-align: left !important;
					margin-left: 12rpx;
					width: 100% !important;
					background-color: #fff !important;
					color: #121212;
					font-size: 28rpx;

					.uni-input-input {
						width: 100%;
						font-size: 30rpx;
					}
				}

				.search-text {
					font-size: 32rpx;
					color: #444;
					margin: 0 20rpx 0 30rpx;
					color: $red;
				}

				.search-search-text {
					padding-left: 16rpx;
				}

				.search-search-key {
					max-width: 80%;
					height: 100%;
					padding: 0 16rpx;
					margin-left: 12rpx;
					display: flex;
					align-items: center;
					border-radius: 15px;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
				}

				.search-key-text {
					box-sizing: border-box;
					padding-right: 12rpx;
					font-size: 12px;
					line-height: 12px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.search-clear {
					padding: 10rpx;
				}

				.search-scan {
					padding: 20rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.order-condition {
				width: 36rpx;
				height: 40rpx;
				margin-left: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.query-date {
				font-size: 28rpx;
				margin-right: 30rpx;
			}

			.dateContent {
				height: 68rpx;
				margin: 16rpx 0 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.date-item {
					width: 240rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: #F6F6F6;
					border-radius: 34rpx;
					text-align: center;
					font-size: 28rpx;
				}

				.date-line {
					width: 24rpx;
					height: 4rpx;
					background-color: #666666;
					margin: 0 16rpx;
				}

			}

		}

		.order-section {
			width: 100%;
			background-color: #fff;
			margin-top: 16rpx;
			color: #111111;

			&.pd1 {
				padding: 30rpx 30rpx 0 30rpx;
			}

			.order-number {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.number-left {
					text {
						font-size: 28rpx;
						float: left;
						margin-right: 16rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;

					}
				}

				.status {
					font-size: 24rpx;
					color: #999;
				}
			}

			.order-btns {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				padding: 24rpx 0rpx;
				border-top:2rpx solid $borderColor;
				.btn {
					margin-left: 16rpx;
				}
			}

			.boder-b {
				border-bottom: 2rpx solid #eee;
			}
		}

		.order-goods {
			flex-wrap: nowrap;
			height: 200rpx;
			padding: 26rpx 0 16rpx;

			.order-goods-item {
				flex-shrink: 0;
				width: 160rpx;
				height: 160rpx;
				margin-right: 24rpx;
				position: relative;

				.order-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 24rpx;
					overflow: hidden;
					border: 2rpx solid $borderColor;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.tag {
					width: 40rpx;
					height: 40rpx;
					background: #EA655E;
					border-radius: 50%;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					position: absolute;
					right: -6rpx;
					top: -6rpx;
				}
			}






		}
	}



	$nav-height:90rpx;
	$search-height:100rpx;
	$body-top:190rpx;

	.coupons-body {
		// margin-top: $nav-height;
		// margin-top: $body-top;
	}

	.coupons-headers {
		width: 100%;
		height: $search-height;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		// position: fixed;
		// top: calc(var(--window-top) + var(--status-bar-height) + $nav-height);
		// left: 0;
		// z-index: 999;
	}

	.home-search {
		width: 100%;
		height: 60rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #ED716A;

		.home-search-text {
			font-size: 26rpx;
			color: #CCCCCCFF;
		}
	}

	.coupon-cell {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;

		margin-top: 16rpx;
		padding: 16rpx 32rpx;
		background-color: #fff;

		>view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 16rpx 0rpx;
		}

		text {
			font-size: 28rpx;
		}

		.title {
			color: #999999;
		}

		.value {
			color: #111111;
		}
	}
</style>
